// 控制面板组件 - 基于用户需求说明的系统配置功能

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Phone,
  Square,
  Volume2,
  VolumeX,
  Sun,
  Camera,
  Settings,
  Play,
  Pause,
  Globe,
  Type
} from 'lucide-react';

const ControlPanel: React.FC = () => {
  const {
    userRole,
    controlSettings,
    updateControlSettings,
    emergencyStop,
    vehicleStatus
  } = useHmiState();

  const handleVolumeChange = (value: number) => {
    updateControlSettings({ volume: value });
  };

  const handleBrightnessChange = (value: number) => {
    updateControlSettings({ brightness: value });
  };

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">控制面板</h3>

      {/* 主要控制按钮 */}
      <div className="grid grid-cols-2 gap-3 mb-6">
        <button
          onClick={emergencyStop}
          className="hmi-button-danger flex items-center justify-center gap-2 py-3 text-lg font-bold"
        >
          <Square size={20} />
          紧急停车
        </button>

        <button className="hmi-button-primary flex items-center justify-center gap-2 py-3">
          <Phone size={20} />
          紧急呼叫
        </button>
      </div>

      {/* 媒体控制 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">媒体控制</h4>
        <div className="grid grid-cols-2 gap-3">
          <button className="hmi-button-secondary flex items-center justify-center gap-2">
            <VolumeX size={18} />
            静音
          </button>
          <div className="flex items-center gap-2">
            <Volume2 size={16} className="text-gray-400" />
            <input
              type="range"
              min="0"
              max="100"
              value={controlSettings.volume}
              onChange={(e) => handleVolumeChange(Number(e.target.value))}
              className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
            />
            <span className="text-sm text-gray-300 w-8">{controlSettings.volume}</span>
          </div>
        </div>
      </div>

      {/* 显示设置 - 亮度、音量、中英文切换、字体大小调节 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">显示设置</h4>
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <Sun size={16} className="text-gray-400" />
            <span className="text-sm text-gray-300 flex-1">亮度</span>
            <input
              type="range"
              min="0"
              max="100"
              value={controlSettings.brightness}
              onChange={(e) => handleBrightnessChange(Number(e.target.value))}
              className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
            />
            <span className="text-sm text-gray-300 w-8">{controlSettings.brightness}</span>
          </div>

          <div className="flex items-center gap-2">
            <Type size={16} className="text-gray-400" />
            <span className="text-sm text-gray-300 flex-1">字体大小</span>
            <select className="bg-gray-700 text-white rounded px-2 py-1 text-sm">
              <option value="small">小</option>
              <option value="medium">中</option>
              <option value="large">大</option>
            </select>
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Globe size={16} className="text-gray-400" />
              <span className="text-sm text-gray-300">语言</span>
            </div>
            <select
              value={controlSettings.language}
              onChange={(e) => updateControlSettings({ language: e.target.value as 'zh' | 'en' })}
              className="bg-gray-700 text-white rounded px-2 py-1 text-sm"
            >
              <option value="zh">中文</option>
              <option value="en">English</option>
            </select>
          </div>
        </div>
      </div>

      {/* 安全员专用控制 */}
      {userRole.type === 'safety_officer' && (
        <div className="border-t border-gray-700 pt-4">
          <h4 className="text-sm font-medium text-gray-300 mb-3">安全员控制</h4>
          <div className="grid grid-cols-2 gap-3">
            <button className="hmi-button-secondary flex items-center justify-center gap-2">
              <Camera size={18} />
              录制
            </button>
            <button className="hmi-button-secondary flex items-center justify-center gap-2">
              <Settings size={18} />
              系统配置
            </button>
            <button className="hmi-button-secondary flex items-center justify-center gap-2">
              <Play size={18} />
              启动
            </button>
            <button className="hmi-button-secondary flex items-center justify-center gap-2">
              <Pause size={18} />
              暂停
            </button>
          </div>
        </div>
      )}

      {/* 自动驾驶状态指示器 */}
      <div className="border-t border-gray-700 pt-4 mt-4">
        <div className="flex items-center justify-between">
          <span className="text-sm text-gray-300">自动驾驶</span>
          <div className={`w-3 h-3 rounded-full ${
            vehicleStatus.autonomousMode ? 'bg-success-500' : 'bg-gray-500'
          }`} />
        </div>
      </div>
    </div>
  );
};

export default ControlPanel;
